<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div {
				/*height: 750px;
			width: 1300px;*/
				margin: 0 auto;
			}
			
			body {
				text-align: center;
			}
			
			canvas {
				background-color: #7FFF00;
			}
		</style>
	</head>

	<body>
		<div><canvas id="1" width="1300" height="750"></canvas>
		</div>
		<script type="text/javascript">
			var bu = document.getElementById("1");
			var bi = bu.getContext("2d");

			var a = 0;
			//			var c = 10;
			//			var d = 10;
			var dar = 200;
			var jd = 0;
			var e = 10;
			var huchang = 2 * e * Math.PI * dar / 360;
			var p = 650;
			var q = 550;
			var x = 200;
			var y = 550;

			setInterval(function() {

				a = a + e;
				jd = a / 180;
				x = x + huchang;
				p = p + huchang;

				bi.clearRect(0, 0, 1300, 750);
				bi.beginPath();
				bi.arc(x, y, 200, jd * Math.PI, jd * Math.PI + Math.PI);
				bi.fillStyle = "white";
				bi.fill();

				bi.beginPath();
				bi.arc(x, y, 200, jd * Math.PI + Math.PI, jd * Math.PI);
				bi.fillStyle = "black";
				bi.fill();

				bi.beginPath();
				bi.arc(x - 100 * Math.cos(jd * Math.PI), y - 100 * Math.sin(jd * Math.PI), 100, 0, 2 * Math.PI);
				bi.fillStyle = "black";
				bi.fill();

				bi.beginPath();
				bi.arc(x + 100 * Math.cos(jd * Math.PI), y + 100 * Math.sin(jd * Math.PI), 100, 0, 2 * Math.PI);
				bi.fillStyle = "white";
				bi.fill();

				bi.beginPath();
				bi.arc(x + 100 * Math.cos(jd * Math.PI), y + 100 * Math.sin(jd * Math.PI), 30, 0, 2 * Math.PI);
				bi.fillStyle = "black";
				bi.fill();

				bi.beginPath();
				bi.arc(x - 100 * Math.cos(jd * Math.PI), y - 100 * Math.sin(jd * Math.PI), 30, 0, 2 * Math.PI);
				bi.fillStyle = "#00FFFF";
				bi.fill();
				//第二
				bi.beginPath();
				bi.arc(p, q, 200, jd * Math.PI, jd * Math.PI + Math.PI);
				bi.fillStyle = "white";
				bi.fill();

				bi.beginPath();
				bi.arc(p, q, 200, jd * Math.PI + Math.PI, jd * Math.PI);
				bi.fillStyle = "black";
				bi.fill();

				bi.beginPath();
				bi.arc(p - 100 * Math.cos(jd * Math.PI), q - 100 * Math.sin(jd * Math.PI), 100, 0, 2 * Math.PI);
				bi.fillStyle = "black";
				bi.fill();

				bi.beginPath();
				bi.arc(p + 100 * Math.cos(jd * Math.PI), q + 100 * Math.sin(jd * Math.PI), 100, 0, 2 * Math.PI);
				bi.fillStyle = "white";
				bi.fill();

				bi.beginPath();
				bi.arc(p + 100 * Math.cos(jd * Math.PI), q + 100 * Math.sin(jd * Math.PI), 30, 0, 2 * Math.PI);
				bi.fillStyle = "black";
				bi.fill();

				bi.beginPath();
				bi.arc(p - 100 * Math.cos(jd * Math.PI), q - 100 * Math.sin(jd * Math.PI), 30, 0, 2 * Math.PI);
				bi.fillStyle = "white";
				bi.fill();
				bi.closePath();

				//线
				bi.beginPath();
				bi.moveTo(x + 200, 550);
				bi.lineTo(x + 250, 550);

				bi.lineWidth = "10";
				bi.strokeStyle = "#000000";
				bi.stroke();

				bi.beginPath();
				bi.moveTo(p, q);
				bi.lineTo((p + x + 100) / 2, q - 400); //daxiexian
				bi.moveTo(p - 100, q - 300); //cheba
				bi.lineTo(x + 200, q - 500);
				bi.lineTo(x + 100, q - 500); //chebashou
				bi.stroke();

				bi.beginPath();
				bi.moveTo(p - 100, q - 300); //chebashou
				bi.lineTo(p - 200, q - 300);
				bi.stroke();

				if(x >= 2150) {
					p = -200;
					x = -650;
				}

			}, 70)
		</script>
	</body>

</html>